<template>
  <!--模板-->
  <el-drawer
    v-model="drawerInfo.isShow"
    title="维护 meta"
    :with-header="false"
    :modal="false"
    size="450px"
  >
    <!--表单-->
    <el-tabs type="border-card">
      <el-tab-pane label="列表">
        <!--基础属性-->
        <component
          :is="tabComp.base"
          :meta="gridMeta"
          :reMeta="reMeta"
        ></component>
      </el-tab-pane>
      <el-tab-pane label="列">
        <!--列-->
        <component
          :is="tabComp.col"
          :formMeta="gridMeta"
        ></component>
      </el-tab-pane>
      <el-tab-pane label="导出">
        <component
          :is="tabComp.output"
          :reMeta="reMeta"
        ></component>
      </el-tab-pane>
    </el-tabs>
  </el-drawer>
</template>

<script lang="ts">
 import { defineComponent, reactive, defineAsyncComponent } from 'vue'
  import { ElDrawer, ElTabs, ElTabPane } from 'element-plus'
  // help
  // 延迟加载
  const _tabComp = {
    base: defineAsyncComponent(() => import('./grid-base.vue')),
    col: defineAsyncComponent(() => import('./grid-col.vue')),
    output: defineAsyncComponent(() => import('./grid-ouput.vue'))
  }

  /**
   * 使用抽屉的方式，维护 json
   */
  export default defineComponent({
    name: 'nf-help-meta-grid-drawer',
    components: {
      ElDrawer, ElTabs, ElTabPane
    },
    props: {
      gridMeta: Object,
      drawerInfo: Object
    },
    setup(props, context) {
    const gridMeta = props.gridMeta

      const reMeta = reactive({})
      Object.assign(reMeta, gridMeta)

      // 延迟加载组件
      const tabComp = reactive({
        col: '',
        output: '',
        base: ''
      })

      setTimeout(() => {
        tabComp.base = _tabComp.base
        tabComp.col = _tabComp.col
        tabComp.output = _tabComp.output
      }, 600)

      return {
        tabComp,
        reMeta
      }
    }
  })
</script>